<template>
  	<div class="business-performance">
		<transition name="fade">
			<div class="search-wrap" v-if="ifShowSearch">
				<div class="search-mask"></div>
				<div class="search-page" v-if="ifShowSearch">
					<div class="search-wrapper">
						

						<van-search class="stock-search-wrap" placeholder="请输入搜索关键词" v-model="searchValue" />

						<van-icon name="cross" class="hide-search-btn" @click="ifShowSearch = false"/>
						
					</div>

					<div class="search-result-wrap">
							<div class="result-item" v-for="item in searchResult" v-html="formatSearchResult(item[0])" @click="selectCompany(item)">
							</div>
					</div>
				</div>
			</div>
		</transition>
    	<div class="white-padding-wrap">
    		<div class="rate-wrap" v-if="scoreObj.overallScore">
    			<div class="rate-cell">
	    			<van-circle
					  v-model="currentRate1"
					  :rate='parseInt(scoreObj.overallScore)'
					  :text="scoreObj.overallScore"
					  :size="circleParam.circleSize"
					  :stroke-width="circleParam.circleStroke"
					  layer-color="#F7EEDF"
					  color="#D4B686"
					/>
					<p class="rate-title">综合评分</p>
					<div class="star-wrapper">
						<div class="star-cell" v-for="(count,ind) in 5" :key="ind">
							<img src="../../assets/star-blank.png" alt="">

							<div class="star-fill" :style="{width : fixWidth(starRate1,ind) }" >
								<img src="../../assets/star.png" alt="">
							</div>
						</div>
					</div>
					<!-- <van-rate v-model="starRate1" allow-half :size="rateParam.size" :readonly="rateParam.readonly" void-icon="star"/> -->
	    		</div>

	    		<div class="rate-cell">
	    			<van-circle
					  v-model="currentRate2"
					  :rate="parseInt(scoreObj.thisScore)"
					  :text="scoreObj.thisScore"
					  :size="circleParam.circleSize"
					  :stroke-width="circleParam.circleStroke"
					  layer-color="#DBDFF1"
					  color="#7384DA"
					/>
					<p class="rate-title">本期评分</p>
					<!-- <van-rate v-model="starRate2" allow-half :size="rateParam.size" :readonly="rateParam.readonly" void-icon="star"/> -->
					<div class="star-wrapper">
						<div class="star-cell" v-for="(count,ind) in 5" :key="ind">
							<img src="../../assets/star-blank.png" alt="">

							<div class="star-fill" :style="{width : fixWidth(starRate2,ind) }" >
								<img src="../../assets/star.png" alt="">
							</div>
						</div>
					</div>
	    		</div>

	    		<div class="rate-cell">
	    			<van-circle
					  v-model="currentRate3"
					  :rate="(1-(scoreObj.rank.split('/')[0]/scoreObj.rank.split('/')[1]))*100"
					  :text="scoreObj.rank.split('/')[0]"
					  :size="circleParam.circleSize"
					  :stroke-width="circleParam.circleStroke"
					  layer-color="#F4DFD3"
					  color="#F29A6A"
					/>
					<p class="rate-title">行业排名</p>
					<p class="rate-desc">行业总数:{{ scoreObj.rank.split('/')[1] }}</p>
	    		</div>
				
    		</div>
			<p class="source-tips  bottom-border">报告期：{{ sourceTips }}</p>
			
    	</div>

    	<div class="bottom-border custom-tabs">
    		<van-collapse v-model="activeNames" accordion @change="collChange">
			    <van-collapse-item title="财务分析" name="1" v-if="financeList.length">
				  	<div slot="title">
				  		财务分析
				  		<!-- <i v-if="financeIndex.length" class="s-card-head-icon" style="display: inline-block;vertical-align:text-top;">
		  					<img src="../../assets/info.png">
		  				</i> -->
		  			</div>
				    <div class="analy-wrap">
						<div class="question-to-fix-on" v-if="financeIndex.length">
							<p class="index-title">{{financeIndex.length}}项需要关注</p>
							<ul class="index-list" :class="{'more-index':ifShowAllIndex}">
								<li class="index-cell" v-for="(indexCell,_ind) in financeIndex" :key="_ind"  v-show="_ind < maxlength ">
									{{ indexCell }}
								</li>
							</ul>
							<div class="toggle-index-wrap" :class="{'reverse' : ifShowAllIndex}" @click="changeMaxlength" v-if="financeIndex.length > 5"><van-icon name="arrow-down" /></div>
						</div>
						<div class="question-to-fix-on" v-else>
							<ul class="index-list" :class="{'more-index':ifShowAllIndex}">
								<li class="index-cell" >
									暂无需要关注内容
								</li>
							</ul>
						</div>

				    	<div class="analy-item" v-for="(item,_ind) in financeList" :key="_ind">
				    		<div class="analy-item-head">
				    			<span class="analy-item-title">
					    			<i class="analy-item-icon">
					    				<img :src="getImgUrl(item.key)">
					    			</i>
					    			{{ item.name }}
					    		</span> 
					    		<span class="analy-item-status" :class="{ 'un-standard' : !item.type }">{{ item.type ? '已达标' : '未达标' }}</span>
				    		</div>
				    		<van-progress :percentage="item.value" :color="item.type ? '#D4B686' : '#EC6B4F' "/>
				    	</div>

				    </div>
			    </van-collapse-item>
			    <van-collapse-item title="相似公司" name="2" class="sp-col-item">
			        <div class="bottom-border" v-if="compareTab.length">
			        	<div class="similar-tab">
			        		<div class="similar-tab-cell" :class="{'active':item.value===compareAcitve}" v-for="item in compareTab" @click="getSimilarData(item.value)">
				        		{{ item.text }}
				        	</div>
			        	</div>
			        </div>
			        <div class="similar-wrap" v-if="compareList.length">
			        	<div class="compare-company" ref="companyWrap" :class="{'limit-height-wrap' : !ifShowAllComp }">
			        		<div class="compare-obj" :class="{'actObj':selectedCompany == item.code}" v-for="(item,index) in compareList" @click="changeCompany(index,$event)">
			        			<!-- <i class="build-icon"></i> -->
			        			<div class="compare-obj-msg">
			        				<p class="compare-obj-name">{{ item.name }}</p>
			        				<p class="compare-obj-code">{{ item.code }}</p>
			        			</div>
			        		</div>
			        	</div>
						<div class="arrow-btn-wrap" @click="ifShowAllComp = !ifShowAllComp">
							<van-icon name="arrow-up" :class="{'reverse-arrow' : !ifShowAllComp }"/>
						</div>

			        	<div class="compare-card" style="width:100%">
			        		<table class="compare-table" cellspacing="0">
			        			<thead>
			        				<th>名称</th>
			        				<th>{{ companyName }}</th>
			        				<th>{{ currentCompany.name }}</th>
			        			</thead>
			        			<tbody>
			        				<tr v-for="item in currentCompany.mkt_data">
			        					<td>{{ item.name }}</td>
			        					<td>{{ item.own }}</td>
			        					<td>{{ item.target }}</td>
			        				</tr>
			        			</tbody>
			        		</table>
			        	</div>

			        	<div class="similar-subject">
			        		<p class="similar-subject-title">关键相似科目</p>
			        		<div class="similar-subject-list">
			        			<div class="similar-subject-cell" v-for="cell in currentCompany.accounts">
			        				{{ cell }}
			        			</div>

			        		</div>
			        	</div>
			        </div>
			    </van-collapse-item>
			    <van-collapse-item  title="竞争对标" name="3">
			    	<div class="compare-card-wrap" v-if="basicCompare.length">
			    		<div class="compare-item-card">
			    			<div class="compare-card-head">
			    				{{ companyName }}
			    				<img class="win-mark" src="../../assets/win.png" v-if="basicCompare[basicCompare.length-1].value > basicCompare[basicCompare.length-1].target">
			    			</div>
			    			<div class="compare-card-body">
			    				<div class="comapre-basic-item" v-for="item in basicCompare" v-if="item.name !== '综合财务星级'">
			    					<span>{{ item.name }}</span>
			    					<span>{{ item.value }}</span>
			    				</div>
			    				<p class="compare-innner-title">综合得分:</p>
			    				<van-progress :percentage="basicCompare[basicCompare.length-1].value*20" color="#F19658"/>
			    			</div>
			    		</div>
			    		<div class="compare-item-card">
			    			<div class="compare-card-head" style="background-image: linear-gradient(160deg, #8292C0 20%,#96A4CA 80%);">
			    				{{ compareObj.name }} <van-icon name="search" class="compare-search-icon" @click="ifShowSearch=true;"/>
			    				<img class="win-mark" src="../../assets/win.png" v-if="basicCompare[basicCompare.length-1].value <= basicCompare[basicCompare.length-1].target">
			    			</div>
			    			<div class="compare-card-body">
			    				<div class="comapre-basic-item" v-for="item in basicCompare" v-if="item.name !== '综合财务星级'">
			    					<span>{{ item.name }}</span>
			    					<span>{{ item.target }}</span>
			    				</div>
			    				<p class="compare-innner-title">综合得分:</p>
			    				<van-progress :percentage="basicCompare[basicCompare.length-1].target*20" color="#92A2D9"/>
			    			</div>
			    		</div>
			    	</div>

			    	<div class="time-selector" @click="timeSel1 = true">
			    		<span>选择时间</span>
			    		<span>{{ sel_time_1 }} <van-icon name="arrow" /></span>
			    	</div>
				    <van-actionsheet
				        v-model="timeSel1"
				        :actions="time_list_1"
				        @select="onSelectTimeA"
				    />
				    <div class="compare-chart-wrap">
				    	<canvas id="compare-bar-chart" style="height: 380px;width: 100%" v-if="showCompareBar"></canvas>
				    </div>
						
						<div class="compare-bold-title">资产结构对比图：</div>
				    <div class="time-selector" @click="timeSel2 = true" style="border-top:1px solid #E1E1E1;">
			    		<span>选择时间</span>
			    		<span>{{ sel_time_2 }} <van-icon name="arrow" /></span>
			    	</div>

			    	<van-actionsheet
				        v-model="timeSel2"
				        :actions="time_list_2"
				        @select="onSelectTimeB"
				    />

				    <div class="compare-bold-title my-compare-tab" :style="{fontWeight:ComparePieVisible?'bold':'normal'}" @click="ComparePieVisible = !ComparePieVisible">
				    	<span>公司资产结构</span>
				    	<van-icon name="arrow" v-if="!ComparePieVisible"/>
				    	<van-icon name="arrow-down" v-else/>
				    </div>

				    <div class="compare-chart-wrap" style="display:flex" v-if="showComparePie" v-show="ComparePieVisible">
				    	<canvas id="compare-pie-chartA" style="height:420px;width: 50%"></canvas>
				    	<canvas id="compare-pie-chartB" style="height:420px;width: 50%"></canvas>
				    </div>

				    <div class="liabilities-wrap">
				    	<div class="compare-bold-title my-compare-tab" :style="{fontWeight:LiabPieVisible?'bold':'normal'}" @click="LiabPieVisible = !LiabPieVisible">
					    	<span>公司负债结构</span>
					    	<van-icon name="arrow" v-if="!LiabPieVisible"/>
					    	<van-icon name="arrow-down" v-else/>
					    </div>
				    	<div class="compare-chart-wrap" style="display:flex" v-if="showLiabPie" v-show="LiabPieVisible">
					    	<canvas id="compare-pie-chartC" style="height:420px;width: 50%"></canvas>
					    	<canvas id="compare-pie-chartD" style="height:420px;width: 50%"></canvas>
					    </div>
				    </div>
			    </van-collapse-item>
			</van-collapse>
    	</div>
  	</div>
</template>

<script>
import Vue from 'vue';
import { getSimilarCompany, getFinance, getZScore, getComparison, searchCompany, getTimeList, getTipsTime} from '@/api/data';

import { Circle, Rate, Collapse, CollapseItem, Dialog, Progress, DatetimePicker, Actionsheet, Icon   } from 'vant';
Vue.use(Circle, Rate, Collapse, CollapseItem, Dialog, Progress, DatetimePicker, Actionsheet, Icon );

export default {
    name: 'BusinessPerformance',
    data() { 
	    return {
			ifInit: true,
	    	searchValue:'',
	    	currentDate:'',
			currentRate1:0,
			currentRate2:0,
			currentRate3:0,
			starRate1:0,
			starRate2:0,
			ifShowAllIndex:false,
			ifShowAllComp:false,
	    	circleParam:{
	    		circleSize:'79px',
	    		circleStroke:60,
	    	},
	    	rateParam:{
	    		size:10,
	    		readonly:true
	    	},
	    	activeNames:'1',
	    	financeList:[],
	    	compareList:[],
	    	compareTab:[
	    		{
	    			value: 'current',
	    			text: '当前期'
	    		},{
	    			value: 'first',
	    			text: '一年期'
	    		},{
	    			value: 'two',
	    			text: '两年期'
	    		},{
	    			value: 'third',
	    			text: '三年期'
	    		}
	    	],
	    	compareAcitve: 'current',
	    	selectedCompany:'',
	    	currentCompany:{},
	    	scoreObj:{},
	    	ifShowSearch:false,
	    	searchResult: [],
	    	time_list_1:[],
	    	time_list_2:[],
	    	compareObj: sessionStorage.myCompareTarget?JSON.parse(sessionStorage.myCompareTarget):{
	    		name:'万科A',
	    		code:'000002'
	    	},
	    	basicCompare:[],
	    	sel_time_1:'',
	    	sel_time_2:'',
	    	timeSel1:false,
	    	timeSel2:false,
	    	showCompareBar: false,
	    	showComparePie: false,
	    	showLiabPie: false,
	    	// ifShowComparePart: true,
	    	financeIndex:[],
	    	ComparePieVisible:true,
			LiabPieVisible:true,
			sourceTips:'',
			maxlength: 5
	    }
	},
	props: ['companyName'],
    mounted(){
    	this.getScoreData();
    	this.getFinanceData();
    	this.getSimilarData('current');
		// this.initComparisonData();
		getTipsTime().then(res => {
			if(res.code === 0){
				this.sourceTips = res.data;
			}
			
		});
    	
	},
	watch:{
		searchValue:function(val, oldVal){
			this.searchSecu(val);
		}
	},
    methods: {
		
		getImgUrl(icon){
			return require("../../assets/icons-"+icon+".png");
		},
		formatArrString(arr) {
			return arr.join('\n');
		},
	  	showMsg: function(text){
	  		Dialog.alert({
			    title: '提示',
			    messageAlign:'left',
			    message: text,
			    className:'my-dialog',
		  	confirmButtonText:'我知道了'
			}).then(() => {
			  // on close
			});
	  	},
	  	getSimilarData(_tab) {
	  		this.compareAcitve = _tab;
	  		getSimilarCompany({
		      	tab:_tab
		    }).then((res) => {
			    this.compareList = res.data.compare_list;
			    this.selectedCompany = res.data.compare_list[0].code;
			    this.currentCompany = this.compareList[0];
			    if(this.$refs.companyWrap){
			    	this.$refs.companyWrap.scrollLeft = 0;	
			    }
			    
		    }, () => {
		      // 异常情况
		    });
	  	},
	  	getFinanceData() {
	  		getFinance().then((res) => {
			    this.financeList = res.data.list;
			    this.financeIndex = res.data.index;
		    }, () => {
		      // 异常情况
		    });
	  	},
	  	getScoreData() {
	  		getZScore().then((res) => {
				this.scoreObj = res.data;
				this.starRate1 = parseFloat(res.data.overallScore/20);
				this.starRate2 = parseFloat(res.data.thisScore/20);
		    }, () => {
		      // 异常情况
		    });
	  	},
	  	initComparisonData() {

	    	getTimeList().then(res =>{
	    		if(res.code === 0) {
	    			this.time_list_1 = res.data.time1;	    			
	    			this.time_list_2 = res.data.time2;


	    			this.time_list_1.forEach((obj,_ind) => {
	    				this.time_list_1[_ind] = {
	    					name : obj
	    				}
	    			});

	    			this.time_list_2.forEach((obj,_ind) => {
	    				this.time_list_2[_ind] = {
	    					name : obj
	    				}
	    			});

	    			this.sel_time_1 = this.time_list_1[0].name;
	    			this.sel_time_2 = this.time_list_2[0].name;
	    			
	    			this.getComparisonData();
	    		}
	    	}).catch(err => {
	    		console.log(err);
	    	})
	  		
	  	},
	  	changeCompany(ind, ev) {
	  		this.selectedCompany = this.compareList[ind].code;
	  		this.$refs.companyWrap.scrollLeft = ev.target.offsetLeft-164;
	  		this.currentCompany = this.compareList[ind];
	  	},
	  	searchSecu(val){
	  		searchCompany({
	  			input_value: val
	  		}).then(res => {
	  			this.searchResult = res.data.data_list;
	  		}).catch(err => {
	  			console.log(err);
	  		});
	  	},
	  	onSelectTimeA(item){
	  		if(item.name != this.sel_time_1) {
	  			this.sel_time_1 = item.name;
	  			this.getComparisonData();
	  		}
	  		this.timeSel1 = false;
			},
			collChange(ev){
				if(this.ifInit && ev=='3'){
					this.initComparisonData();
					this.ifInit = false;
				}
				console.log(ev);
			},
	  	onSelectTimeB(item){
	  		if(item.name != this.sel_time_2) {
	  			this.sel_time_2 = item.name;
	  			this.getComparisonData();
	  		}
	  		this.timeSel2 = false;
	  	},
	  	getComparisonData(){
	  		getComparison({
					compare_code: this.compareObj.code,
					time1: this.sel_time_1,
					time2: this.sel_time_2
			}).then(_res => {
			    if(_res.code === 0){
			    	this.basicCompare = _res.data.basic.basic ? _res.data.basic.basic : [];

						this.compareObj.name = _res.data.stock_name;
						this.compareObj.code = _res.data.stock_code;
			    	let showOwnPie = false;
			    	let showOtherPie = false;
			    	let showOwnLiabPie = false;
			    	let showOtherLiabPie = false;
			    	// console.log(_res.data.basic.value);
			    	if(_res.data.basic.value!= undefined){
			    		this.showCompareBar = true;
			    	}
			    	
			    	if(_res.data.compare.own != null && _res.data.compare.own != undefined) {
			    		if(_res.data.compare.own.assets_value != undefined  && !!_res.data.compare.other){
			    			showOwnPie = true;
			    		}

			    		if(_res.data.compare.own.liabilities_value != undefined && !!_res.data.compare.other){
			    			showOwnLiabPie = true;
			    		}
			    	}

			    	if(_res.data.compare.other !=null && _res.data.compare.other != undefined) {
			    		if(_res.data.compare.other.assets_value != undefined && !!_res.data.compare.own){
			    			showOtherPie = true;
			    		}

			    		if(_res.data.compare.other.liabilities_value != undefined &&  !!_res.data.compare.own){
			    			showOtherLiabPie = true;
			    		}
			    	}

			    	
			    	this.showComparePie = showOwnPie && showOtherPie;
			    	this.showLiabPie = showOwnLiabPie && showOtherLiabPie;

			    	// console.log( this.showComparePie , this.showLiabPie , this.showCompareBar , this.basicCompare.length)
			    	
			    		if(this.showCompareBar){
			    			setTimeout(() =>{this.getCompareBarChart(_res.data.basic.value);},500);
				    	}

				    	if(showOwnPie){
				    		setTimeout(() =>{this.getComparePieChart(_res.data.compare.own.assets_value,'compare-pie-chartA',this.companyName)},500);
				    	}

				    	if(showOtherPie){
				    		setTimeout(() =>{this.getComparePieChart(_res.data.compare.own.liabilities_value,'compare-pie-chartC',this.companyName)},500);
				    	}

				    	if(showOtherPie){
				    		setTimeout(() =>{this.getComparePieChart(_res.data.compare.other.assets_value,'compare-pie-chartB',this.compareObj.name)},500);
				    	}

				    	if(showOtherLiabPie){
				    		setTimeout(() =>{this.getComparePieChart(_res.data.compare.other.liabilities_value,'compare-pie-chartD',this.compareObj.name)},500);

				    	}
			    	
			    	
			    }
				}, () => {
					// 异常情况
				});
	  	},
	  	formatSearchResult(text){
	  		let titleString = text;

            if (!titleString) {
	            return '';
	        }
          	if (this.searchValue && this.searchValue.length > 0) {
	            // 匹配关键字正则
	            let replaceReg = new RegExp(this.searchValue, 'g');
	            // 高亮替换v-html值
	            let replaceString = '<span class="search-text">' + this.searchValue + '</span>';
	            // 开始替换
	            titleString = titleString.replace(replaceReg, replaceString);
	        }
	        return titleString;
	  	},
	  	formatLargeNum(_num) {
	  		function strNumSize(tempNum) {
		        var stringNum = tempNum.toString();
		        var index = stringNum.indexOf(".");
		        var newNum = stringNum;
		        if(index != -1) {
		            newNum = stringNum.substring(0, index)
		        };
		        return newNum.length;
		    }
		    var moneyUnits = ["", "万", "亿", "万亿"];
		    var dividend = 10000;
		    var curentNum = parseFloat(_num);
		    //转换数字
		    var curentUnit = moneyUnits[0];
		    //转换单位 
		    for(var i = 0; i < 4; i++) {
		        curentUnit = moneyUnits[i];
		        if(strNumSize(curentNum) < 5) {
		            break;
		        };
		        curentNum = curentNum / dividend;
		    };
		    var m = {
		        num: 0,
		        unit: ""
		    };
		    m.num = curentNum.toFixed(1);
		    m.unit = curentUnit;
		    return m.num+m.unit;
		},
		fixWidth(_rate, ind){
			let _w = '0%';
			if(_rate - ind < 0) { 
				_w = '0%';
			} else {
				if(_rate - ind <1) {
					_w = (_rate - ind)*100 + '%'
				} else {
					_w = '100%';
				}
			}
			return _w;
		},
	  	selectCompany(_obj){
	  		this.compareObj.code = _obj[1];
	  		this.compareObj.name = _obj[0].split('(')[0];
	  		sessionStorage.myCompareTarget = JSON.stringify({
	  			name:this.compareObj.name,
	  			code:this.compareObj.code
	  		});
			this.getComparisonData();
			this.searchValue = '';
	  		this.ifShowSearch = false;
	  	},
	  	getCompareBarChart(_data) {
		    let data = [];
			_data.forEach(obj => {
	  			data.push(
	  				{
						label: obj.name,
					    type: this.compareObj.name,
					    value: parseFloat(obj.target)
					}
	  			);
			});
	  		_data.forEach(obj => {
	  			data.push(
	  				{
					    label: obj.name,
					    type: this.companyName,
					    value: parseFloat(obj.value)
					}
	  			);
			});
			
	  		var chart = new this.$F2.Chart({
			    id: 'compare-bar-chart',
			    pixelRatio: window.devicePixelRatio
			});

			chart.source(data.reverse());
			chart.coord({
			    transposed: true
			});

			chart.tooltip({});
			chart.axis('label', {
			    line: this.$F2.Global._defaultAxis.line,
			    grid: null
			});
			chart.axis('value', false);

			chart.legend({
			    align: 'right',
    			itemWidth: null,
    			marker:'square'
			});
			chart.interval().position('label*value').color('type',['#F19658','#92A2D9']).adjust({
			    type: 'dodge',
			    marginRatio: 1 / 32
			});
			chart.render();
	  	},
	  	getComparePieChart(_data,_id,_text){
			var data = _data;
			
			data.forEach(obj => {
				obj.a = 1;
				obj.value = parseFloat(obj.value);
			});
			var map = {};
			var colorGroup = ['#5D69BA', '#3B8FE5', '#E9C07F','#F3876F','#7AB990','#ACB0CC','#F19658','#5D69BA', '#3B8FE5', '#E9C07F','#F3876F','#7AB990','#ACB0CC','#F19658'];
			var legendItems = [];
		    data.map((obj,ind) => {
		      var item = {
		        name: obj.name,
		        value: '    ' + (obj.value*100).toFixed(2) + '%',
		        marker: {
		          symbol: 'square',
		          fill: colorGroup[ind]
		        }
		      };
		      legendItems.push(item);
		    });
			var chart = new this.$F2.Chart({
			    id: _id,
			    pixelRatio: window.devicePixelRatio,
			    padding: [ 0, 10, 190, 10] 
			});
			chart.source(data);
			chart.tooltip(false);
			chart.legend({
				custom: true,
        		items: legendItems,
			    position: 'bottom',
			    align:'center',
			    offsetY:-30,
    		    itemFormatter:function (val) {
	    			let _result = val.length > 9 ? val.slice(0,7)+'\n'+val.slice(7): val;
					return _result; // val 为每个图例项的文本值
				},
				nameStyle: {
			        fill: '#222222',
			        textAlign:'left',
			        width:80,
			        height: 20 ,
			        fontSize: '12', // 文本大小
			    },valueStyle: {
			        fill: '#222222',
			        textAlign:'left',
			        width:50,
			        height: 20 ,
			        fontSize: '12', // 文本大小
			    }
			});
			chart.coord('polar', {
			    transposed: true,
			    innerRadius: 0.7,
			    radius: 0.85
			});
			chart.axis(false);
			chart.interval().position('a*value').color('name', ['#5D69BA', '#3B8FE5', '#E9C07F','#F3876F','#7AB990','#ACB0CC']).adjust('stack').style({
			    lineWidth:3,
			    stroke: '#fff'
			  });

			chart.guide().text({
			    position: ['50%', '50%'],
    			content: _text,
    			style:{
    				fontSize:18
    			}
			  });
			chart.render();
	  	},
		changeMaxlength(){
			if(this.maxlength == 5) {
				this.ifShowAllIndex = true;
				this.maxlength = 9999;
			} else {
				this.maxlength = 5;
				this.ifShowAllIndex = false;
			}
		}
	}
};
</script>

<style>
.business-performance{
	box-sizing: border-box;
	background-color: #EAEAEA;
}
.business-performance .van-cell__title{
	font-weight: bold;
	font-size: 16px;
}
.bottom-border{
	border-bottom: 1px solid #EAEAEA;
}
.white-padding-wrap{
	background-color: #fff;
	padding:0 15px;
}
.rate-wrap{
	height:180px;
	display:flex;
	box-sizing: border-box;
	padding:30px 5px 20px;
	overflow: hidden;
	justify-content: space-between;
}

.rate-title{
	font-size:16px;
	font-weight: bold;
	line-height:1em;
	margin:10px 0 8px;
}
.rate-desc{
	line-height: 1em;
	font-size:12px;
	color:#757679;
	margin:11px 0 0;
}
.van-circle__text{
	font-weight:bold;
	margin-top:1px;
	font-size: 21px;
}
.business-performance .van-cell:not(:last-child)::after{
	display: none!important;
}
.compare-card-body .van-progress__pivot,.analy-wrap .van-progress__pivot{
	display: none;
}
.analy-wrap{
	/* padding:0 8px; */
}
.analy-wrap .van-progress{
	height: 6px;
}
.analy-item{
	margin-bottom: 15px;
}
.analy-item-head{
	display: flex;
	justify-content: space-between;
	line-height: 30px;
	margin-bottom: 5px;
}
.analy-item-head span.analy-item-title{
	text-align: left;
	font-size: 15px;
	color:#222;
	display: flex;
	align-items:center;
	font-weight: bold;
}
.analy-item-head span.analy-item-title i,.analy-item-head span.analy-item-title i img{
	width:15px;
	height: 15px;
	line-height: 0;
}
.analy-item-head span.analy-item-title i{
	margin-right: 9px;
}
.analy-item-status{
	color:#757679;
	font-size: 12px;
}
.analy-item-status.un-standard{
	color: #FA3A39;
}
.business-performance .van-cell__title{
	text-align: left;
	
}
.business-performance .van-collapse-item__title{
	border-bottom: 1px solid #EAEAEA;
}
.business-performance .van-collapse-item{
	margin-bottom:5px;
}

/*相似公司*/
.similar-tab{
	display: flex;
	border-top: 1px solid #EAEAEA;
	margin:0 15px;
}
.similar-tab-cell{
	flex: 1;
	text-align: center;
	color: #757679;
	font-size: 15px;
	position: relative;
	padding:15px 0;
}
.similar-tab-cell.active{
	color: #D4B686;
}
.similar-tab-cell.active:after{
	content: '';
	position: absolute;
	width: 27px;
	height: 3px;
	background-color: #D4B686;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
}
.sp-col-item .van-collapse-item__title{
	border-bottom: 0;
}
.sp-col-item  .van-collapse-item__content{
	padding:0 0 15px;
}
.compare-company{
	flex-wrap: wrap;
	padding:22px 12px 0 12px;
	overflow: hidden;
	display: flex;
	max-height: 1000px;
	/* justify-content: space-between; */
	transition:all 1.4s;
}
.compare-company.limit-height-wrap{
	max-height:165px;
}
.arrow-btn-wrap{
	padding:10px 0;
}
.arrow-btn-wrap i{
	font-weight: bold;
	transition:all .8s;
}
.arrow-btn-wrap i.reverse-arrow{
	transform: rotate(180deg)
}
.compare-company::-webkit-scrollbar{
  display: none;
}
.compare-obj{
	width:calc((100% - 12px) / 3);
	/* min-width:106px; */
	height: 47px;
	border-radius: 24px;
	background-color: #F6F0E5;
	flex-shrink:0;
	display: flex;
	align-items: center;
	margin:0 2px 10px 2px;
}
/* .compare-obj i{
	margin: 0 5px 0 5px;
	width: 32px;
	height: 32px;
	background-size: 32px;
	background-position: top center;
	background-repeat: no-repeat;
	background-image: url(../../assets/build-unselected.png);
} */
.compare-obj.actObj{
	background-color: #D4B686;
}
.compare-obj.actObj i{
	background-image: url(../../assets/build-selected.png);
}
.compare-obj div.compare-obj-msg{
	color: #C3A26D;
	font-size: 13px;
	text-align: center;
	width:100%;
}
.compare-obj.actObj div.compare-obj-msg{
	color: #FFF;
}

.compare-obj div.compare-obj-msg p{
	line-height: 1em;
	margin:0;
	text-align: center;
}
.compare-obj div.compare-obj-msg p.compare-obj-name{
	margin-bottom: 5px;
}
.compare-table{
	border-radius: 9px;
	overflow: hidden;
	width:calc(100% - 30px);
	margin:0 15px;
	box-shadow: 0 0 11px 4px rgba(0,0,0,0.02);
	border:0;
	border-collapse:collapse;
}
.compare-table thead{
	background-color: #F6F0E5;
	height: 37px;
	color: #757679;
	font-weight: normal;
	font-size:13px;
	line-height: 37px;
}
.compare-table tr{
	line-height: 34px;
	border-bottom: 1px solid #EAEAEA;
	font-size: 13px;
}
.compare-table tr:last-child{
	border-bottom: none;
}
.compare-table tr td{
	/*text-align: left;*/
	color:#222;
}
.compare-table tr td:first-child{
	color:#D4B686;
}
.similar-subject{
	margin:0 20px;
}
.similar-subject-title{
	text-align: left;
	font-size: 16px;
	color: #222;
	font-weight: bold;
	margin:23px 0 16px;
}
.similar-subject-list{
	display: flex;
	flex-wrap:wrap;
}
.similar-subject-list .similar-subject-cell{
	background-color: #F4ECDF;
	color: #C3A26D;
	padding:0 20px;
	border-radius: 13px;
	font-size:13px;
	line-height: 26px;
	margin-right: 8px;
	margin-bottom: 10px;
}

.compare-card-wrap{
	display: flex;
	justify-content: space-between;
}
.compare-item-card{
	width:calc(50% - 10px);
	/*height: 185px;*/
	border-radius: 8px;
	overflow: hidden;
	box-shadow:0 0 11px 4px rgba(0,0,0,0.02);
}
.compare-card-head{
	height:57px;
	line-height: 57px;
	font-size: 17px;
	color: #fff;
	background-image: linear-gradient(160deg, #F08B4F 20%,#F29F5F 80%);
	position: relative;
}
.win-mark{
	position: absolute;
	width: 49px;
	bottom:-10px;
	right: -10px;
	z-index:1;
}
.compare-card-body{
	background:#fff;
	padding:10px 13px;
	box-sizing: border-box;
}
.compare-search-icon{
	vertical-align: text-top;
	position: relative;
	z-index: 9;
}
.search-wrap{
	width:100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: 99999;
}
.search-wrap .search-mask{
	width:100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.7);
	z-index:9;
}
.search-wrap .search-page{
	width: 100%;
	height: 300px;
	position: absolute;
	z-index: 10;
	bottom:0;
	left: 0;
	background-color: #fff;
	/* transform: translateY(100%); */
}
.search-wrapper{
	display: flex;
	box-sizing: border-box;
	padding:10px 15px;
}
.hide-search-btn{
	line-height: 34px!important;
	margin-left: 10px;
}
.stock-search-wrap{
	border-radius: 17px;
	overflow: hidden;
}
.search-text{
	color:#D4B687;
}
.comapre-basic-item{
	display: flex;
	font-size: 12px;
	justify-content: space-between;
	color:#757679;
	margin-bottom:6px;
}
.comapre-basic-item span{
	text-align: left;
}
.comapre-basic-item span:last-child{
	text-align: right;
}
.compare-innner-title{
	text-align:left;
	margin:0 0 5px 0;
	color: #000000;
}
.time-selector{
	margin:15px 0 0;
	padding:20px 0;
	border-bottom:1px solid #E1E1E1;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color:#222;
}
.time-selector .van-icon{
	transform: translateY(1.5px);
	margin-left: 20px;
	color:#CCCCCC;
}
.search-result-wrap{
	padding:0 23px;
}
.result-item{
	border-bottom:1px solid #EAEAEA;
	text-align: left;
	font-size:14px;
	color: #222;
	padding:13px 0;
}
.custom-tabs .van-cell__title{
	padding-left:10px;
	position: relative;
}
.custom-tabs .van-cell__title:before{
	content:'';
	width:3px;
	height:12px;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-6px;
	background-color: #D4B686;
}
.compare-bold-title{
	font-size:14px;
	font-weight: bold;
	color:#222;
	text-align: left;
	
}
.my-compare-tab{
	display: flex;
	justify-content: space-between;
	padding:15px 0;
	border-bottom: 1px solid #E1E1E1;
}
.my-compare-tab i{
	color:#CCCCCC;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.star-wrapper{
	width:100%;
	height: 10px;
	line-height: 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	padding:0 3px;
	box-sizing: border-box;
	margin-top: 12px;
}
.star-wrapper .star-cell{
	flex-shrink: 0;
	width:10px;
	height: 10px;
	overflow: hidden;
	position: relative;
}
.star-wrapper .star-cell img{
	width:10px;
	height: 10px;
}
.star-fill{
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	overflow: hidden;
}
.source-tips{
	font-size:12px;
	color:#BCBCBC;
	text-align: left;
	margin:0;
	padding:0 0 15px;
}
.question-to-fix-on{
	background-color:#FAF4E9;
	border:1px solid #E9DBC2;
	border-radius: 3px;
	padding:12px;
	color:#C29854;
	font-size:12px;
	text-align: left;
	padding-bottom:0;
	margin-bottom:15px;
}
.index-title{
	font-weight:bold;
	margin:0;
	margin-bottom:10px;
}
.index-list{
	max-height:200px;
	overflow:hidden;
	transition: all .6s ease;
}
.index-list.more-index{
	max-height: 600px;
}
.index-cell{
	margin-bottom:10px;
}
.index-cell::before{
	content:'';
	margin-right: 3px;
	width:4px;
	height:4px;
	border-radius: 4px;
	display: inline-block;
	background-color:#E4D6C0;
	line-height:18px;
	transform: translateY(-2px);
}
.toggle-index-wrap{
	text-align: center;
	padding:5px 0;
}
.toggle-index-wrap i{
	transform: rotate(0);
	transition: all .4s ease;
}
.toggle-index-wrap.reverse i{
	transform: rotate(180deg);
}
</style>